<extend name="Base/base" />
<block name="head">
    <link rel="stylesheet" href="/Public/Admin/css/personal.css"/>
    <link rel="stylesheet" href="/Public/Index/css/plan/details.css"/>
    <!--文件上传-->
    <script type="text/javascript" src="/Public/Cropper/js/ajaxfileupload.js" ></script>
    <style>
        .row{padding:0;margin:0}
        .alert{padding:0}
        #upload {
            background: url(/Public/Admin/images/file.png) no-repeat left top;
            padding-left: 20px;
            display: block;
            padding-bottom: 20px;
        }
        .icon_add {
            color: #1eb500;
            margin-left: 12px;
        }

        
    </style>
</block>

<block name="content">
    <section class="layui-larry-box">
        <div class="larry-personal">
            <div class="layui-tab">
                <blockquote class="layui-elem-quote news_search">
                    <div class="layui-inline">
                        <a class="layui-btn layui-btn-normal newsAdd_btn" href="{:U('Flow/formDesign')}">返回</a>
                    </div>
                </blockquote>

                <!-- 表单项 -->
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="c-red">*</span>表单名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="form_name" class="layui-input" value="{$info.form_name}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">表单描述</label>
                        <div class="layui-input-block">
                            <textarea name="form_desc" placeholder="请输入内容" class="layui-textarea cont"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="c-red">*</span>表单分类</label>
                        <div class="layui-input-block">
                            <select name="form_sort" class="layui-input" lay-verify="required">
                                <option value="0">未分类</option>
                                <foreach name="sorts" item="sort">
                                    <option value="{$sort.sort_id}" {$info['form_sort'] == $sort['sort_id'] ? 'selected' :''}>{$sort.sort_name}</option>
                                </foreach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属部门</label>
                        <div class="layui-input-block">
                            <select name="dept_id" class="layui-input" lay-verify="required">
                                <option value="0">全部</option>
                                <foreach name="depts" item="dept">
                                    <option value="{$dept.dept_id}" {$info['dept_id'] == $dept['dept_id'] ? 'selected' :''}>{$dept.dept_name}</option>
                                </foreach>
                            </select>
                        </div>
                    </div>
<!--                    <div class="layui-form-item">
                        <label class="layui-form-label">导入表单</label>
                        <div class="layui-input-block">
                            <a href="#" id="upload" style="display:inline-block"><span class="fj">上传表单</span></a>
                            <a download="表单模板.html" href="/Public/form.html"><img src="/Public/Admin/images/download.png">下载模板</a>
                            <div class="filename-cont">
                            </div>
                            <input type="file" id="inputImage" name='imgfile' style="display:none">
                            <input type="hidden" id="filename" name="uploads" value="">
                            <input type="hidden" id="fileurl" name="uploads_url" value="">
                            <input type="hidden" name="url" value="{:U('delFile')}">
                        </div>
                    </div>-->
                    <!--表单设计器-->
                    <!--<input type="hidden" name="form_id" value="{$one.id}">-->
                    <div class="row">
                        <div class="well well-small">
                            <span class="pull-right">
                                <a href="javascript:void(0);" class="btn btn-primary btn-small" onclick="leipiFormDesign.fnReview();">预览效果</a>
                            </span>
                            <p>
                                <button type="button" onclick="leipiFormDesign.exec('text');" class="btn btn-info">文本框</button>
                                <button type="button" onclick="leipiFormDesign.exec('textarea');" class="btn btn-info">多行文本</button>
                                <button type="button" onclick="leipiFormDesign.exec('select');" class="btn btn-info">下拉菜单</button>
                                <button type="button" onclick="leipiFormDesign.exec('radios');" class="btn btn-info">单选框</button>
                                <button type="button" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-info">复选框</button>
                                <button type="button" onclick="leipiFormDesign.exec('macros');" class="btn btn-info">宏控件</button>
                                <button type="button" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-info">进度条</button>
                                <button type="button" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-info">二维码</button>
                                <button type="button" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-info">列表控件</button>
                                <button type="button" onclick="leipiFormDesign.exec('user');" class="btn btn-info">用户控件</button>
                            </p>
                        </div>
                        <div class="alert">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <strong>提醒：</strong>单选框和复选框，如：<code>{|-</code>选项<code>-|}</code>两边边界是防止误删除控件，程序会把它们替换为空，请不要手动删除！
                        </div>
                        <!--<input type='hidden' id='form_id' value='{$row.id}'>-->
                    </div><!--end row-->   
                    <div class="row">
                        <script id="myFormDesign" type="text/plain" style="width:100%;">
                            {$info.print_model}
                        </script>
                    </div><!--end row-->
                    <div class="layui-form-item">
                        <div class="layui-input-block button">
                            <input type='hidden' name='form_id' id='form_id' value='{$info.form_id}'>
                            <a href="javascript:void(0);" class="btn btn-success btn-small formSubmit" onclick="leipiFormDesign.fnCheckForm('save');" data-url="{:U('saveFormDesign')}">保&nbsp;&nbsp;存</a>
                            <!--<a class="layui-btn btn-submit ajax-post" data-url="{:U('save')}" data-form="">提交</a>-->
                            <!--<a class="btn btn-primary btn-small">重&nbsp;&nbsp;置</a>-->
                            <button type="reset" class="btn btn-primary btn-small reset">重置</button>
                        </div>
                    </div>
                </form>
                <!-- 完 -->
            </div>
        </div>
    </section>
</block>


<block name="script">
    <script type="text/javascript" charset="utf-8" src="/Public/Admin/design/js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Public/Admin/design/js/ueditor/ueditor.all.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Public/Admin/design/js/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Public/Admin/design/js/ueditor/formdesign/leipi.formdesign.v4.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Public/Admin/js/form.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Public/Admin/js/common.js"></script>
    <!-- script start-->  
    <script type="text/javascript">
        $(initFormdesign());
        $(initUpload("{:U(CONTROLLER_NAME.'/upload')}","flow"));
        
        $('.reset').click(function(){
            leipiEditor.setContent('');
        })
        var leipiEditor = UE.getEditor('myFormDesign', {
            toolleipi: true, //是否显示，设计器的 toolbars
            textarea: 'design_content',
            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
            toolbars: [[
                    'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', '|', 'simpleupload', 'horizontal', 'spechars', 'wordimage', '|', 'inserttable', 'deletetable', 'mergecells', 'splittocells', '|', 'template']],
            //focus时自动清空初始化时的内容
            //autoClearinitialContent:true,
            //关闭字数统计
            wordCount: false,
            //关闭elementPath
            elementPathEnabled: false,
            //默认的编辑区域高度
            initialFrameHeight: 300
                    //更多其他参数，请参考ueditor.config.js中的配置项
        });

        var leipiFormDesign = {
            exec: function (method) {
                leipiEditor.execCommand(method);
            },

            fnCheckForm: function (type) {
                if (leipiEditor.queryCommandState('source'))
                    leipiEditor.execCommand('source');//切换到编辑模式才提交，否则有bug


                if (leipiEditor.hasContents() || $("#filename").val() != '') {
                    leipiEditor.sync();       //同步内容

                    var type_value, formid, formeditor;
                    if (typeof type !== 'undefined') {
                        type_value = type;
                    }

                    $("#button_save").text("submit...");
                    //异步提交数据
                    var url = $('.formSubmit').attr('data-url');
                    var dept = $('select[name=dept_id]').val();
                    var sort = $('select[name=form_sort]').val();
                    var desc = $('textarea[name=form_desc]').val();
                    var form_id = $('#form_id').val();
                    var file_name = $('#filename').val();
                    var file_url = $('#fileurl').val();
                    var data = {'form_id':form_id,'form_name': $('input[name=form_name]').val(),'form_desc':desc, 'form_sort': sort, 'dept_id': dept, 'print_model': leipiEditor.getContent(),'file_name':file_name,'file_url':file_url};
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: data,
                        success: function (data) {
                            console.log(data);
                            if (data.status) {
                                layer.msg('保存成功');
                                location.href = data.url;
                            } else {
                                layer.msg('保存失败');
                            }
                        }
                    });
                } else {
                    alert('表单内容不能为空！')
                    return false;
                }
            },

            fnReview: function () {
                if (leipiEditor.queryCommandState('source'))
                    leipiEditor.execCommand('source');//切换到编辑模式才提交，否则有bug

                if (leipiEditor.hasContents()) {
                    leipiEditor.sync();       //同步内容

                    document.saveform.target = "mywin";
                    window.open('', 'mywin', "menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" + (screen.availWidth - 10) + ",height=" + (screen.availHeight - 50) + "\"");
                    document.saveform.action = "{:U('formView')}";
                    document.saveform.submit(); //提交表单
                } else {
                    alert('表单内容不能为空！');
                    return false;
                }
            }
        };
    </script>
</block>